<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright 2014 Bauer-Live Softwaredevelopment.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:p="http://primefaces.org/ui"
                xmlns:hf="http://highfaces.org"

                template="/WEB-INF/master.xhtml"
                >
    <ui:define name="headline">ChartAxis - Enhanced customizing of axes</ui:define>
    <ui:define name="description">With the ChartAxis component, multiple customized axes can be defined. If you have more than 1 y axis however, you need to tell the ChartSeries which axis to use.</ui:define>
    <ui:define name="icontent">

        <h:panelGroup layout="block">
            <hf:chart type="line"  title="List of Pojos" xaxisLabel="Years" >
                <hf:chartAxis position="w" title="Amount of Girls" type="linear" format="{value} p.a." gridLineColor="#FF8888" style="font-weight: bold;"/>
                <hf:chartAxis id="girlsAxis" position="e" title="Amount of Boys" type="linear" format="{value} p.a." gridLineColor="#8888FF" style="font-weight: bold;"/>
                <hf:chartAxis id="temperatureAxis" position="e" title="Average Temperature" type="linear" format="{value} °C" gridLineWidth="0"/>
                <hf:chartSerie name="Boys" value="#{multAxisBean.boys}" var="point" point="#{point.amount}" tickLabel="#{point.year}" />
                <hf:chartSerie yaxis="girlsAxis" name="Girls" value="#{multAxisBean.girls}" var="point" point="#{point.amount}"  />
                <hf:chartSerie yaxis="temperatureAxis" name="Temperature" value="#{multAxisBean.avgTemp}" var="point" point="#{point.temperature}"  />
            </hf:chart>

        </h:panelGroup>
    </ui:define>
    <ui:define name="xhtml">
        <script type="syntaxhighlighter" class="brush: xml"><![CDATA[
            <hf:chart type="line"  title="List of Pojos" xaxisLabel="Years" >
                <hf:chartAxis position="w" title="Amount of Girls" type="linear" format="{value} p.a." gridLineColor="#FF8888" style="font-weight: bold;"/>
                <hf:chartAxis id="girlsAxis" position="e" title="Amount of Boys" type="linear" format="{value} p.a." gridLineColor="#8888FF" style="font-weight: bold;"/>
                <hf:chartAxis id="temperatureAxis" position="e" title="Average Temperature" type="linear" format="{value} °C" gridLineWidth="0"/>
                <hf:chartSerie name="Boys" value="# {multAxisBean.boys}" var="point" point="# {point.amount}" tickLabel="# {point.year}" />
                <hf:chartSerie yaxis="girlsAxis" name="Girls" value="# {multAxisBean.girls}" var="point" point="# {point.amount}"  />
                <hf:chartSerie yaxis="temperatureAxis" name="Temperature" value="# {multAxisBean.avgTemp}" var="point" point="# {point.temperature}"  />
            </hf:chart>
            
            ]]></script>>
    </ui:define>
    <ui:define name="java">        
        <script type="syntaxhighlighter" class="brush: java"><![CDATA[
@ManagedBean
@RequestScoped
public class MultAxisBean {

    protected List<Births> boys;
    protected List<Births> girls;
    protected List<AvgTemperature> avgTemp;

    public MultAxisBean() {
        reload();
    }

    public void reload() {
        boys = new ArrayList<>();
        girls = new ArrayList<>();
        avgTemp = new ArrayList<>();
        Random r = new Random();
        for (int i = 2000; i < 2010; i++) {
            boys.add(new Births(Integer.toString(i), r.nextInt(500) + 800));
            girls.add(new Births(Integer.toString(i), r.nextInt(500) + 800));
            avgTemp.add(new AvgTemperature(Integer.toString(i), new Double(r.nextInt(20) + 28 + r.nextFloat())));
        }
    }

    public List<Births> getBoys() {
        return boys;
    }

    public List<Births> getGirls() {
        return girls;
    }

    public List<AvgTemperature> getAvgTemp() {
        return avgTemp;
    }
}
            ]]></script>
    </ui:define>
    <ui:define name="additional">  
        <p:tab title="Births.java">
        <script type="syntaxhighlighter" class="brush: java"><![CDATA[

public class Births {

    protected String year;
    protected Integer amount;

    public String getYear() {
        return year;
    }

    public void setYear(String year) {
        this.year = year;
    }

    public Integer getAmount() {
        return amount;
    }

    public void setAmount(Integer amount) {
        this.amount = amount;
    }

    public Births() {
    }

    public Births(String year, Integer amount) {
        this.year = year;
        this.amount = amount;
    }
}
        ]]></script>
            </p:tab>
    </ui:define>

</ui:composition>